<template>
<div class="goodsOrderTracking">
  <el-button v-if="showChange" type="primary" size="mini" @click="$emit('change-delivery', {id: orderId})">修改物流信息</el-button>
  <template v-if="model">
    <el-descriptions :column="3" direction="vertical" border>
      <el-descriptions-item>
        <template slot="label">
          订单号
        </template>
        {{orderSn}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          配送方式
        </template>
        {{model.logisticsCompanyName}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          物流单号
        </template>
        {{model.mailNo}}
      </el-descriptions-item>
      <el-descriptions-item :span="2">
        <template slot="label">
          收货地
        </template>
        {{model.receiveAddress.desc}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          物流状态
        </template>
        {{model.logisticsStatusDesc}}
      </el-descriptions-item>
    </el-descriptions>
    <el-steps v-if="model.logisticsTraceDetailList" direction="vertical" :active="model.logisticsTraceDetailList.length - 1" finish-status="success" style="margin-top: 20px">
      <el-step
        v-for="(item, index) in model.logisticsTraceDetailList"
        :key="index"
        :title="item.desc"
        :description="$$getFormatTime(item.time)"></el-step>
    </el-steps>
  </template>
</div>
</template>

<script>
export default {
  name: "goodsOrderTracking",
  props:{
    orderId: String,
    orderSn: String,
    showChange: {
      type: Boolean,
      default: false
    }
  },
  data(){
    return{
      model: null,
    }
  },
  created(){
    this.initInfo();
  },
  methods:{
    initInfo(){
      //跟踪物流
      this.$yAxios({
        url: this.$api.goods.deliveryTracking,
        data:{
          orderId: this.orderId,
        },
        loading: true
      }, info => {
        this.$set(this, 'model', info);
        if(!info.logisticsTraceDetailList){
          this.$message({
            type: 'warning',
            message: '未查询到物流信息'
          });
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.goodsOrderTracking{
  >.el-button{
    position: absolute;
    top: 19px;
    left: 110px;
  }
}
</style>
